<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div class="box"></div>
      </el-col>
      <el-col :span="14">
        <div class="config-wrapper">
          <el-form label-width="130px" :model="configData">
            <el-form-item label="选中状态颜色：">
              <el-color-picker v-model="configData.color" show-alpha />
              <el-button class="reset-btn" style="width: 10%" @click="resetColor">重置</el-button>
            </el-form-item>
            <el-form-item label="导航栏设置：">
              <div class="table-wrapper">
                <el-table :data="tableData" style="width: 100%" max-height="300" :border="true">
                  <el-table-column prop="name" label="导航名称" width="200">
                    <template #default="scoped">
                      <div class="select-icon">
                        <span v-if="!scoped.row.isEdit && scoped.row.name">{{
                          scoped.row.name
                        }}</span>
                        <el-input
                          v-else
                          v-model="scoped.row.name"
                          size="small"
                          :maxlength="4"
                          :show-word-limit="true"
                        />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="path" label="跳转链接" width="200">
                    <template #default="scoped">
                      <div class="select-icon">
                        <el-select v-model="scoped.row.path" size="small">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="icon" label="默认图标" width="200">
                    <template #default="scoped">
                      <div class="select-icon" @click="openIconDialog('icon', scoped.$index)">
                        <component v-if="scoped.row.icon" :is="scoped.row.icon" />
                        <span v-else>添加</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="selectIcon" label="选中图标" width="200">
                    <template #default="scoped">
                      <div class="select-icon" @click="openIconDialog('selectIcon', scoped.$index)">
                        <component v-if="scoped.row.selectIcon" :is="scoped.row.selectIcon" />
                        <span v-else>添加</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="150">
                    <template #default="scope">
                      <el-button
                        link
                        type="danger"
                        size="small"
                        @click.prevent="editRow(scope.row)"
                      >
                        编辑
                      </el-button>
                      <el-button
                        link
                        type="danger"
                        size="small"
                        @click.prevent="deleteRow(scope.$index)"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="add-table-item-btn">
                <el-button style="width: 40%" @click="onAddItem">添加导航</el-button>
                <span>注意：最多只允许新增五个菜单导航</span>
              </div>
            </el-form-item>

            <el-form-item label="导航栏展示页面：">
              <el-checkbox-group v-model="checkList">
                <el-checkbox
                  v-for="(item, index) in textTableData"
                  :label="item.origin_name"
                  :key="index"
                />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="文字导航设置：">
              <div class="table-wrapper">
                <el-table :data="textTableData" style="width: 100%" max-height="300" :border="true">
                  <el-table-column prop="origin_name" label="文字导航" width="300" />
                  <el-table-column prop="name" label="自定义名称" width="300">
                    <template #default="scoped">
                      <el-input
                        :style="{ width: '150px' }"
                        v-model="scoped.row.name"
                        size="small"
                        :show-word-limit="true"
                        :maxlength="4"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form-item>
          </el-form>
          <div class="save-btn">
            <el-button :style="{ width: '100px' }" type="primary">保存</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图标弹窗 -->
    <icon-list :isShow="iconDialogVisible" @close="closeIconDialog" />
    <!-- 图标弹窗 -->
  </div>
</template>

<script setup lang="ts" name="Menu">
import IconList from './components/IconList.vue'
import { ITableData, IOption, ITextTableData, IShowPage } from './interface'
import { ElMessage } from 'element-plus'
// 表单配置
const configData = ref<{ color: string }>({
  color: 'rgba(58, 168, 215, 1)'
})
// 表格数据
const tableData = ref<ITableData[]>([
  {
    name: '首页',
    path: '/home',
    icon: 'el-aim',
    isEdit: false,
    selectIcon: ''
  }
])
// 文字导航表格数据
const textTableData = ref<ITextTableData[]>([
  {
    name: '店铺主页',
    origin_name: '店铺主页'
  },
  {
    name: '个人中心',
    origin_name: '个人中心'
  },
  {
    name: '课程信息',
    origin_name: '课程信息'
  },
  {
    name: '我的',
    origin_name: '我的'
  }
])

// 导航栏展示页面数据
const checkList = ref<IShowPage[]>([])

// 记录当前对表格哪一行的哪个图标字段进行编辑
const editIconRecord = ref<{
  index: number
  name: string
}>()

// 下拉选框数据
const options = ref<IOption[]>([
  {
    value: '/home',
    label: '首页'
  }
])

// 图标弹窗
const iconDialogVisible = ref<boolean>(false) // 控制图标弹窗显示隐藏
// 图标弹窗关闭
const closeIconDialog = (iconName: string) => {
  if (iconName && editIconRecord.value) {
    const { name, index } = editIconRecord.value
    tableData.value[index][name] = iconName
  }
  iconDialogVisible.value = false
}
// 图标弹窗打开
const openIconDialog = (name: string, index: number) => {
  editIconRecord.value = { index, name }
  iconDialogVisible.value = true
}

// 重置颜色
const resetColor = () => {
  configData.value.color = 'rgba(58, 168, 215, 1)'
}

// 表格编辑
const editRow = (row: ITableData) => {
  row.isEdit = !row.isEdit
}

// 表格删除
const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}

// 动态创建表格行
const onAddItem = () => {
  if (tableData.value.length > 5) {
    ElMessage.error('最多只能添加5个导航')
    return
  }

  tableData.value.push({
    name: '',
    path: '',
    icon: '',
    selectIcon: '',
    isEdit: true
  })
}
</script>

<style lang="scss" scoped>
.box {
  width: 300px;
  height: 500px;
  background-color: #f00;
  margin: 20px auto 0;
}

.reset-btn {
  margin-left: 20px;
}
.add-table-item-btn {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  span {
    font-size: 14px;
    color: #ccc;
    margin-top: 5px;
  }
}
.select-icon {
  cursor: pointer;
  svg {
    width: 2em;
    height: 2em;
  }
}
.config-wrapper {
  width: 100%;
}
// .table-wrapper >>> .el-table__inner-wrapper::before {
//   /* 去除下边框 */
//   height: 0;
// }
.save-btn {
  margin: 50px 0 0 20px;
}
</style>
